/**
 * @file icon-button
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  PureComponent,
  PropTypes
} from 'react';
import {Renderer, render, renderChildren} from './renderer';
import * as cx from 'classnames';
import * as CustomPropTypes from './propTypes';
import * as omit from 'lodash/omit';
import * as pick from 'lodash/pick';
import * as assign from 'object-assign';
import * as schema from './panel-schema.json';

@Renderer({
  name: 'panel',
  desc: '...',
  test: (path, config) => /(?:^|\/)panel$/.test(path),
  schema
})
export default class GridRenderer extends PureComponent {
  static propTypes = {
    className: PropTypes.string,
    title: PropTypes.any,
    header: PropTypes.any,
    body: PropTypes.any,
    footer: PropTypes.any,
    actions: PropTypes.any,
    data: PropTypes.any
  };

  static defaultProps = {
    className: 'panel-default',
    headerClassName: 'panel-heading',
    footerClassName: 'panel-footer bg-light lter wrapper',
    actionsClassName: 'panel-footer clearfix',
    bodyClassName: 'panel-body'
  };

  renderActions() {
    let {
      $path,
      actions,
      data,
      onRequestAction,
      disabled,
      actionsClassName
    } = this.props;

    if (!actions || actions.length === 0) {
      return null;
    }

    return (
      <div className={actionsClassName}>
        <div className="btn-toolbar pull-right">
          {actions.map((action, index) => (
            render(`${$path}/action`, assign({
              type: 'button'
            }, action), {
              key: index,
              disabled: disabled,
              data: data,
              detectPropName: 'data',
              onRequestAction: onRequestAction
            })
          ))}
        </div>
      </div>
    );
  }


  render() {
    const {
      className,
      title,
      header,
      data,
      footer,
      footerClassName,
      body,
      headerClassName,
      bodyClassName,
      actions,
      $path
    } = this.props;

    const childProps = assign({}, omit(this.props, ['$path', 'title', 'header', 'body', 'headerClassName', 'footerClassName', 'bodyClassName', 'className', 'actions', 'name']), {
      data
    });

    return (
      <div
        className={cx('panel', className)}
      >
        {header ? renderChildren($path, header, assign({}, childProps, {className: headerClassName})) : title ? (
          <div className={cx(headerClassName)}><h3 className="panel-title">{renderChildren($path, title, childProps)}</h3></div>
        ) : null}
        {body ? (
          <div className={cx(bodyClassName)}>{renderChildren($path, body, childProps)}</div>
        ) : null}
        {footer ? (
          <div className={cx(footerClassName)}>{renderChildren($path, footer, childProps)}</div>
        ) : null}
        {this.renderActions()}
      </div>
    );
  }
}
